<template>
	<view class="re_radio">
		<scroll-view 
								 scroll-with-animation="true"
								 :scroll-top="topPosition"
								 show-scrollbar="false"
								 scroll-y="true" 
								 class="scroll-Y" 
								 @scrolltolower="lower"
		             @scroll="scroll">
			<!-- 轮播图 -->
			<ra-banner></ra-banner>
			<!-- 推荐电台展示 -->
			<radios :radios="radios"></radios>	
		</scroll-view>
		<i v-show="show" class="iconfont back" @click="backTop">&#xeb21;</i>
	</view>
</template>
 
<script>
	import RaBanner from "./RaBanner"
	import Radios from "./Radios"
	
	import {getHotRadio} from "@/network/axios/radio/hotRadio"
	import {debounce} from "@/utils/tools"
	
	export default {
		name: '',
		data(){
			return {
				radios: [],
				limit: 30,
				show: false,
				topPosition: 0
			}
		},
		methods:{
			//滚动到底部 加载更多数据
			lower() {
				console.log("加载更多")
				this.limit += 30
				getHotRadio(this.limit).then(res => {
					this.radios = res.data.djRadios
				})
			},
			scroll(e) {
				this.topPosition = e.detail.scrollTop
				this.show = this.topPosition >= 600
			},
			backTop() {
				this.topPosition = 0
			}
		},
		created() {
			getHotRadio().then(res => {
				this.radios = res.data.djRadios
			})
		},
		components:{ RaBanner, Radios }
	}
</script>
 
<style lang="less" scoped>
	.re_radio {
		padding: 0 10px;
	}
	.scroll-Y {
		height: 480px;
	}
	.back {
		position: fixed;
		width: 30px;
		height: 30px;
		text-align: center;
		bottom: 80px;
		right: 20px;
		z-index: 2;
		color: #e74c3c;
		font-size: 50upx;
		border: 1px solid #e74c3c;
		border-radius: 50%;
		background-color: #fff;
	}
</style>
